<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>jQuery Buttonify test page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en" />
    <style type="text/css">
a.button
{
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: white;
    text-decoration: none;
    display: inline-block;
    height: 24px;
    margin: -6px 6px -6px 0;
    padding-right: 18px;
}
a.button span
{
    background: transparent url('bg_button_span.gif') no-repeat top left;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    color: black;
    font-weight: bold;
}
a.button:active
{
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button:active span
{
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
a.button span img
{
    width: 32px;
    height: 32px;
    margin: -10px 4px -16px -4px;
	border: 0;
}
table td
{
	padding: 1em;
}
    </style>
	<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="../lib/jquery.buttonify.js"></script>
	<script language="javascript" type="text/javascript">
		var trigger = function()
		{
			$(this).parent().css('background-color', '#00ff00');
		}
		$(function(){
			$('.jquery').each(function()
			{
				$(this).bind($(this).parents('div').attr('id'), trigger);
			});
			$('#tabs').tabs();
			$.buttonify();
			$('.jquery-after').each(function()
			{
				$(this).bind($(this).parents('div').attr('id'), trigger);
			});
		})
	</script>
  </head>
  <body>
  	<h1>jquery.buttonify</h1>
	<p>
		This test page allows you to see that buttonify works for all kinds of events. There should be no unstyled buttons
		on this page. All buttons on this page has an associated handler, indicated by the headline it is listed under.
		When the corresponding action is performed over a button, its background should turn green.
	</p>
	<h2>Explanation</h2>
	<p>
		There are three ways you can bind events to buttons (directly in the HTML, using jQuery before the 
		<code>&lt;input&gt;</code> is turned into a link, and using jQuery after the <code>&lt;input&gt;</code> is
		turned into a link), and there are two types of buttons (submit and button).
		The example tables show the matrix of all of these.
    </p>
	
	<p>
	  <pre>var trigger = function()
{
	$(this).parent().css('background-color', '#00ff00');
}
$(function()
{
	// bind to inputs before they are turned into links
	$('.jquery').each(function()
	{
		$(this).bind($(this).parents('div').attr('id'), trigger);
	});
	$('#tabs').tabs();
	$.buttonify();
	// bind to inputs after they have been turned into links
	$('.jquery-after').each(function()
	{
		$(this).bind($(this).parents('div').attr('id'), trigger);
	});
})
</pre>	
	</p>
	
	<p>
		Buttons are from <a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">How to 
		make sexy buttons with CSS</a>. Button icon from <a href="http://tango.freedesktop.org/">the Tango Project</a>.
	</p>
	<p>
		<input type="button" class=" -icon-edit-clear" onclick="$('td').css('background-color', '#fff');" value="Reset background color" />
	</p>
	
	<p>
		<em>Note that the button above shows how to add an icon.</em>
	</p>
	
	<div id="tabs">
    <ul>
      <li><a href="#click">onClick</a></li>
      <li><a href="#dblclick">onDblclick</a></li>
      <li><a href="#focus">onFocus</a></li>
      <li><a href="#mouseover">onMouseover</a></li>
      <li><a href="#mouseout">onMouseout</a></li>
      <li><a href="#mousedown">onMousedown</a></li>
      <li><a href="#mouseup">onMouseup</a></li>
      <li><a href="#keypress">onKeypress</a></li>
    </ul>
		
	<div id="click">
    <h2>Onclick</h2>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onclick="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onclick="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
	</div>
	
	<div id="dblclick">
    <h2>Ondblclick</h2>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" ondblclick="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" ondblclick="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
	</div>
	
	<div id="focus">
    <h2>Onfocus</h2>
	<p>
		Tab to or click on the buttons to have them receive focus.
	</p>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onfocus="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onfocus="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
	</div>
	
	<div id="mouseover">
    <h2>Onmouseover</h2>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onmouseover="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onmouseover="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
    </div>

	<div id="mouseout">
    <h2>Onmouseout</h2>
	<p>
		Onmouseout has a quirk because of the <code>&lt;span&gt;</code> inside the button.
	</p>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onmouseout="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onmouseout="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
    </div>

	<div id="mousedown">
    <h2>Onmousedown</h2>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onmousedown="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onmousedown="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
    </div>

	<div id="mouseup">
    <h2>Onmouseup</h2>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onmouseup="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onmouseup="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
    </div>

	<div id="keypress">
    <h2>Onkeypress</h2>
	<p>
		Put focus on the buttons using Tab, and press a button on the keyboard.
	</p>
    <table>
      <tr>
        <th></th>
        <th>HTML</th>
        <th>jQuery (before)</th>
        <th>jQuery (after)</th>
      </tr>
      <tr>
        <th>Button</th>
        <td><input type="button" value="Foobar" onkeypress="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="button" value="Foobar" class="jquery" /></td>
        <td><input type="button" value="Foobar" class="jquery-after" /></td>
      </tr>
      <tr>
        <th>Submit</th>
        <td><input type="submit" value="Foobar" onkeypress="$(this).parent().css('background-color', '#00ff00');" /></td>
        <td><input type="submit" value="Foobar" class="jquery" /></td>
        <td><input type="submit" value="Foobar" class="jquery-after" /></td>
      </tr>
    </table>
    </div>
    </div>
  </body>
</html>
